import React from 'react'
import styles from './home.module.css'
import { Swiper, Image } from 'react-vant';
import { Badge, Space, SearchBar, Toast } from 'antd-mobile'
import { BellOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
import './hx.css';

function Index() {
  const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
    'https://img.yzcdn.cn/vant/apple-5.jpg',
    'https://img.yzcdn.cn/vant/apple-6.jpg',
    'https://img.yzcdn.cn/vant/apple-7.jpg',
    'https://img.yzcdn.cn/vant/apple-8.jpg',
    ]
    const navigate=useNavigate()
  return (
    <div>
      <div className={styles.hh}>
        <div className="demo-swiper">
          <Swiper>
            {images.map((image) => (
              <Swiper.Item key={image}>
                <Image lazyload src={image} />
              </Swiper.Item>
            ))}
          </Swiper>
        </div>
        <div className={styles.xx}>
          <SearchBar placeholder='请输入内容' onFocus={()=>navigate('/city/start')} />
        </div>
        
        <div className={styles.xh}>
          <Badge content={Badge.dot} >
            <BellOutline fontSize={26} onClick={()=>navigate('/yd')}/>
          </Badge>
        </div>


      </div>
    </div>
  )
}

export default Index
